<template>
  <view class="pay-box">
    <view class="pay-list">
      <view class="row" v-for="(payWay, index) in payWayList" :key="index" @click="changePayType(payWay.payCode)">
        <view class="left">
          <image :src="payWay.payIcon"></image>
        </view>
        <view class="center"> {{ payWay.payName }} </view>
        <view class="right">
          <radio :checked="payWay.payCode == paytype" color="#f5340d" />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  components: {},
  props: {
    hide: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      payWayList: [
      ],
      paytype: "",
    }
  },
  computed: {},
  watch: {
  },
  created() {

  },
  mounted() {
    if (this.hide) {
      this.payWayList = [
        {
          createTime: "2022-07-31 13:08:41",
          params: {},
          id: 3,
          payName: "球券支付",
          payInfo: "球券支付",
          payUrl: "/api/pay/zfb/createProductOrder",
          payIcon: "http://cnd.ydshenghou.com/alipay.png",
          payCode: "3",
          status: "1",
          sort: 1,
        }
      ]
    } else {
      this.payWayList = [
        {
          createTime: "2022-07-31 13:08:41",
          params: {},
          id: 2,
          payName: "余额支付",
          payInfo: "余额支付",
          payUrl: "/api/pay/zfb/createProductOrder",
          payIcon: "http://cnd.ydshenghou.com/alipay.png",
          payCode: "2",
          status: "1",
          sort: 1,
        },
        {
          createTime: "2022-07-31 13:08:41",
          params: {},
          id: 2,
          payName: "积分支付",
          payInfo: "积分支付",
          payUrl: "/api/pay/zfb/createProductOrder",
          payIcon: "http://cnd.ydshenghou.com/alipay.png",
          payCode: "1",
          status: "1",
          sort: 1,
        },
        {
          createTime: "2022-07-31 13:08:41",
          params: {},
          id: 4,
          payName: "收银台支付",
          payInfo: "收银台支付",
          payUrl: "/api/pay/zfb/createProductOrder",
          payIcon: "http://cnd.ydshenghou.com/alipay.png",
          payCode: "4",
          status: "1",
          sort: 1,
        },
      ]
    }
  },

  methods: {
    changePayType(code) {
      this.paytype = code
      this.$emit("changeCode", code)
    },
  },
}
</script>
<style lang="scss" scoped>
.pay-box {
  width: 100%;
  min-height: 100rpx;
  background: #ffffff;
  margin-top: 30rpx;
  box-sizing: border-box;
  padding: 30rpx 26rpx;

  .pay-list {
    width: 100%;

    .row {
      width: 100%;
      height: 80rpx;
      display: flex;
      align-items: center;

      .txt {
        width: 100%;
        text-align: right;

        font-size: 24rpx;
        font-family: "钉钉进步体 Regular";
        font-weight: 500;
        color: #f5340d;
        line-height: 43rpx;
      }

      .left {
        min-width: 53rpx;
        flex-shrink: 0;
        display: flex;
        align-items: center;

        font-size: 30rpx;
        font-family: "钉钉进步体 Regular";
        font-weight: 500;
        color: #333333;
        line-height: 34rpx;

        image {
          width: 41rpx;
          height: 41rpx;
        }

        .count {
          font-size: 30rpx;
          font-family: "钉钉进步体 Regular";
          font-weight: 500;
          color: #333333;
          line-height: 34rpx;
        }
      }

      .center {
        flex: 1;
        color: #212121;

        font-size: 28rpx;
        font-family: "钉钉进步体 Regular";
        font-weight: 500;
        color: #333333;
        line-height: 80rpx;

        .title1 {
          font-size: 28rpx;
          font-family: "钉钉进步体 Regular";
          font-weight: 500;
          color: #333333;
          line-height: 80rpx;
        }

        .num {
          font-size: 28rpx;
          font-family: "钉钉进步体 Regular";
          font-weight: 500;
          color: #999999;
          line-height: 80rpx;
          margin-left: 15rpx;
        }
      }

      .right {
        width: 60upx;
        flex-shrink: 0;
        display: flex;
        justify-content: flex-end;

        .small {
          font-size: 24rpx;
          font-family: "钉钉进步体 Regular";
          font-weight: bold;
          color: #333333;
          line-height: 80rpx;
        }

        .price {
          font-size: 32rpx;
          font-family: "钉钉进步体 Regular";
          font-weight: bold;
          color: #333333;
          line-height: 80rpx;
        }

        .cash {
          font-size: 28rpx;
          font-family: "钉钉进步体 Regular";
          font-weight: bold;
          color: #f5340d;
          line-height: 80rpx;
        }

        .money {
          font-size: 28rpx;
          font-family: "钉钉进步体 Regular";
          font-weight: bold;
          color: #f5340d;
          line-height: 80rpx;
        }
      }
    }
  }
}
</style>
